<template>
	<view class="flex-col homepage">
		
		<view class="flex-col wrapper-two">
			<view class="wraper-row">
				<view class="u-line-1 text">南航碧桂园小区停车场</view>
				<u-tag class="tag" text="认证成功" type="warning" size="mini"></u-tag>
			</view>
			<view class="flex-row wraper-row-two">
				<view class="flex-col flex-row box-four">
					<view class="u-line-1 text-two">车辆楼层</view>
					<view class="u-line-1 text-three">车位编号</view>
					<view class="u-line-1 text-four">绑定车辆</view>
				</view>
				<view class="flex-col flex-row box-five">
					<view class="flex-row box-row">
						<view class="u-line-1 text-five">B2</view>
						<view class="u-line-1 text-six">车位区域</view>
					</view>
					<view class="flex-row box-row-two">
						<view class="u-line-1 text-seven">02</view>
						<view class="u-line-1 text-eight">车位状态</view>
					</view>
					<view class="u-line-1 text-nine">B2C7788</view>
				</view>
				<view class="flex-col flex-row box-six">
					<view class="u-line-1 text-ten">A区</view>
					<view class="u-line-1 text-eleven">租赁</view>
				</view>
			</view>
		</view>
		
		<view class="flex-col wrapper-two">
			<view class="wraper-row">
				<view class="u-line-1 text">南航碧桂园小区停车场</view>
				<u-tag class="tag" text="认证成功" type="warning" size="mini"></u-tag>
			</view>
			<view class="flex-row wraper-row-two">
				<view class="flex-col flex-row box-four">
					<view class="u-line-1 text-two">车辆楼层</view>
					<view class="u-line-1 text-three">车位编号</view>
					<view class="u-line-1 text-four">绑定车辆</view>
				</view>
				<view class="flex-col flex-row box-five">
					<view class="flex-row box-row">
						<view class="u-line-1 text-five">B2</view>
						<view class="u-line-1 text-six">车位区域</view>
					</view>
					<view class="flex-row box-row-two">
						<view class="u-line-1 text-seven">02</view>
						<view class="u-line-1 text-eight">车位状态</view>
					</view>
					<view class="u-line-1 text-nine">B2C7788</view>
				</view>
				<view class="flex-col flex-row box-six">
					<view class="u-line-1 text-ten">A区</view>
					<view class="u-line-1 text-eleven">租赁</view>
				</view>
			</view>
		</view>
		<u-button class="button" type="success">
			+添加车位
		</u-button>
	</view>
</template>
<script>
	export default {
		data() {
			return {}
		},
		methods: {

		}
	}
</script>
<style lang="scss" scoped>
	/** 全局样式-开始,建议放在公共css样式文件中,比如common.css 或app.vue文件 */

	html,
	body {
		margin: 0;
		width: 100%;
		height: 100%;
		font-size: 16px
	}

	view,
	text,
	image {
		position: relative;
		box-sizing: border-box;
		flex-shrink: 0;
	}

	.flex-col {
		display: flex;
		align-items: flex-start;
		flex-direction: column;
	}

	.flex-row {
		display: flex;
		align-items: flex-start;
	}

	.flex-col .flex-row {
		width: 100%
	}

	/** 全局样式-结束*/

	.homepage {
		height: 1334rpx;
		padding: 44rpx 0rpx 0rpx 27rpx;

		.wrapper-two {
			width: 684rpx;
			height: 374rpx;
			margin: 0rpx 0rpx 32rpx 10rpx;
			padding: 9rpx 0rpx 50rpx 26rpx;
			border-width: 2rpx;
			border-style: solid;
			border-color: rgba(226, 226, 226, 1);

			.wraper-row {
				width: 626rpx;
				margin: 0rpx 0rpx 4rpx 2rpx;
				padding: 36rpx 0rpx;
				border-bottom-width: 2rpx;
				border-bottom-style: solid;
				border-bottom-color: rgba(226, 226, 226, 1);

				.text {
					width: 308rpx;
					font-size: 30rpx;
					font-weight: 600;
					color: rgba(92, 92, 92, 1);
				}

				.tag {
					top: 32rpx;
					right: -4rpx;
					position: absolute;
				}
			}

			.wraper-row-two {
				width:700rpx;
				height: 180rpx;
				padding: 7rpx 164rpx 0rpx 1rpx;

				.box-four {
					width: 142rpx;
					margin-top: 2rpx;

					.text-two {
						width: 100%;
						margin-bottom: 22rpx;
						font-weight: 600;
						color: rgba(133, 133, 133, 1);
					}

					.text-three {
						width: 100%;
						margin-bottom: 24rpx;
						font-weight: 600;
						color: rgba(133, 133, 133, 1);
					}

					.text-four {
						width: 100%;
						font-weight: 600;
						color: rgba(133, 133, 133, 1);
					}
				}

				.box-five {
					width: 255rpx;

					.box-row {
						width: 255rpx;
						justify-content: space-between;
						margin-bottom: 20rpx;
						padding-right: 1rpx;

						.text-five {
							width: 48rpx;
							font-weight: 600;
							color: rgba(132, 132, 132, 1);
						}

						.text-six {
							width: 122rpx;
							font-weight: 600;
							color: rgba(133, 133, 133, 1);
						}
					}

					.box-row-two {
						width: 255rpx;
						justify-content: space-between;
						margin-bottom: 22rpx;
						padding-right: 1rpx;

						.text-seven {
							width: 48rpx;
							font-weight: 600;
							color: rgba(132, 132, 132, 1);
						}

						.text-eight {
							width: 122rpx;
							font-weight: 600;
							color: rgba(133, 133, 133, 1);
						}
					}

					.text-nine {
						width: 156rpx;
						font-weight: 600;
						color: rgba(132, 132, 132, 1);
						margin-top: 6rpx;
					}
				}

				.box-six {
					width: 48rpx;

					.text-ten {
						width: 60rpx;
						margin-bottom: 20rpx;
						font-weight: 600;
						color: rgba(132, 132, 132, 1);
					}

					.text-eleven {
						width: 60rpx;
						font-weight: 600;
						color: rgba(132, 132, 132, 1);
					}
				}
			}
		}

		.button {
			width: 676rpx;
			height: 74rpx;
			background: rgba(61, 119, 245, 1);
			font-weight: 600;
		}
	}
</style>